<template>
  <div class="root">
    <div class="icon">
      <img src="../../../assets/images/首页logo.png">
      <span>云医通</span>
    </div>
    <el-form :model="user_forget" :rules="rules_forget" ref="form_forget">
      <!-- 账号 -->
      <div class="user">
        <p class="user-account">用户名:</p>
        <el-form-item class="input item" prop="name">
          <el-input style="width: 300px;font-size: 18px;margin-left: -18px;" size="small" v-model="user_forget.name"
            placeholder="请输入用户名"></el-input>
        </el-form-item>
      </div>

      <!-- 密码 -->
      <div class="user">
        <p class="user-account">密码:</p>
        <el-form-item class="input" prop="newpassword">
          <el-input style="width: 300px;font-size: 18px;" size="small" v-model="user_forget.newpassword" type="password"
            placeholder="请输入新密码"></el-input>
        </el-form-item>
      </div>

      <!-- 确认密码 -->
      <div class="user">
        <p style="font-size: 18px;margin-top: 10px;margin-right: 5px;">确认密码:</p>
        <el-form-item class="input" prop="confirm">
          <el-input style="width: 300px;font-size: 18px;" size="small" v-model="user_forget.confirm" type="password"
            placeholder="请重新输入新密码"></el-input>
        </el-form-item>
      </div>

      <!-- 手机 -->
      <!-- 18228976402 验证码的获取只能使用该手机号 -->
      <div class="user">
        <p class="user-account" style="font-size: 18px;margin-top: 10px;margin-right: 25px;">手机号:</p>
        <el-form-item class="input" prop="phone">
          <el-input style="width: 300px;font-size: 18px;" size="small" v-model="user_forget.phone"
            placeholder="请输入手机号"></el-input>
        </el-form-item>
      </div>

      <!-- 验证码 -->
      <div class="user">
        <p class="user-account">验证码:</p>
        <el-form-item class="input">
          <el-input style="width: 200px;font-size: 18px;margin-left: -18px;" size="default"
            v-model="user_forget.captcha"></el-input>
          <el-button v-if="!flag" style="margin-left: 20px;" type="info" plain @click="GetCaptcha">获取验证码</el-button>
          <el-button v-else style="margin-left: 20px;" type="info" plain disabled>获取验证码({{ seconds }})</el-button>
        </el-form-item>
      </div>

    </el-form>
    <div class="footer">
      <el-button type="primary" @click="ResetPassword()" style="width: 300px;">
        重置
      </el-button>
    </div>
  </div>
</template>

<script setup>

import { ref, reactive } from 'vue'
import { reqGetCaptcha, reqVerify, reqResetPassword } from "@/api/user";
import { useRouter } from 'vue-router';

const $router = useRouter()

// 重置密码表单实例
let form_forget = ref()
let user_forget = reactive({
  name: '',
  newpassword: '',
  confirm: '',
  phone: '',
  captcha: ''
})
// 是否禁用按钮
let flag = ref(false)
// 倒计时
let seconds = ref(5)
// 定时器
let count = ref()
// 获取验证码
const GetCaptcha = async () => {
  // 关闭定时器
  if (count.value) {
    clearInterval(count.value)
  }
  flag.value = true
  // 获取验证码
  let res = await reqGetCaptcha(user_forget.phone)
  // console.log(res)
  if (res.data.code == 1) {
    user_forget.captcha = res.data.data
  }
  count.value = setInterval(() => {
    if (seconds.value > 0) {
      seconds.value -= 1
      // console.log(seconds.value)
    } else if (seconds.value == 0) {
      flag.value = false
      seconds.value = 5
      clearInterval(count.value)
    }
  }, 1000)
}

// 重置密码
const ResetPassword = async () => {
  form_forget.value.validate()
  let res = await reqVerify(user_forget.captcha, user_forget.phone)
  // console.log(res)
  if (res.data.code == 1) {
    let res = await reqResetPassword(user_forget.name, user_forget.newpassword)
    // console.log(res)
    if (res.data.code == 1) {
      $router.push('/home')
      alert('重置成功 请重新登陆')
    } else {
      alert(`${res.data.msg}`)
    }
  } else {
    alert(`${res.data.msg}`)
  }
}
// 重置密码的表单校验
const rules_forget = {
  name: [{ trigger: 'blur' }, {
    validator: (rule, value, callback) => {
      const usernamePattern = /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/; // 匹配字母、数字和汉字，长度在1到10之间
      if (!value) {
        callback(new Error('用户名不能为空'));
      } else if (!usernamePattern.test(value)) {
        callback(new Error('用户名只能包含字母、数字或汉字，且长度在1到10之间'));
      } else {
        callback();
      }
    }, trigger: 'blur'
  }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const phonePattern = /^[1][3-9][0-9]{9}$/ // 手机号校验规则
        if (!value) {
          callback(new Error('手机号不能为空'));
        } else if (!phonePattern.test(value)) {
          callback(new Error('请输入有效的手机号'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },],
  newpassword: [{ trigger: 'blur' },
  {
    validator: (rule, value, callback) => {
      const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,12}$/; // 只能包含字母或数字，长度在8到10之间
      if (!user_forget.newpassword) {
        callback(new Error('密码不能为空'));
      } else if (!passwordPattern.test(value)) {
        callback(new Error('密码只能包含字母或数字，且长度在8到10之间'));
      } else {
        callback();
      }
    }, trigger: 'blur'
  }],
  confirm: [{ required: true, message: '请确认密码', trigger: 'blur' },
  {
    validator: (rule, value, callback) => {
      if (user_forget.confirm != user_forget.newpassword) { // 确认密码与设定密码一致
        callback(new Error('确认密码与密码不一致'));
      } else {
        callback();
      }
    },
    trigger: 'blur',
  },],
}
</script>

<style lang="scss" scoped>
.root {
  min-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon {
    display: flex;
    margin-top: 5%;
    margin-right: 580px;
    margin-left: 560px;
    img {
      width: 80px;
      height: 80px;
      margin-left: 30px;
      margin-bottom: 30px;
    }

    span {
      font-size: 36px;
      margin-left: 30px;
      margin-top: 20px;
      font-style: italic;
      font-weight: 600;
      background: linear-gradient(45deg, #c2e9fb, #a1c4fd);
      -webkit-background-clip: text;
      color: transparent;
      min-width:108px;
    }
  }

  .user {
    display: flex;
    height: 60px;

    .user-account {
      font-size: 18px;
      margin-top: 10px;
      margin-right: 40px;
    }

    .user-sex {
      height: 50px;
      font-size: 18px;
      margin-top: 10px;
      margin-right: 40px;
    }

    .input {
      height: 50px;
      line-height: 50px;
    }
  }

  .footer {
    margin-left: 40px;
  }
  .item{
    ::v-deep(.el-form-item__error){
      margin-left: -20px;
    }
  }
}
</style>
